<template>
  <div class="TDescription">
    <el-descriptions :column="column" :direction="direction">
      <el-descriptions-item v-for="item in columns" :key="item.prop" :label="item.label">
        <template v-if="item.key">
          <slot :name="item.key" :record="form"></slot>
        </template>
        <template v-else>
          <el-tooltip
            v-if="item.prop == 'projectName'"
            class="item"
            effect="dark"
            :content="form[item.prop]"
            placement="top-start"
          >
            <div class="line-clamp-1 flex-1">
              {{ form[item.prop] }}
            </div>
          </el-tooltip>
          <span v-else>{{ form[item.prop] }}</span>
        </template>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: "TDescription",
  props: {
    //当前数据
    form: {
      require: true,
      type: Object,
      default: () => {},
    },
    columns: {
      require: true,
      type: Array,
      default: () => [],
    },
    column: {
      require: false,
      type: Number,
      default: 3,
    },
    direction: {
      require: false,
      type: String,
      default: "horizontal",
    },
  },
};
</script>
